<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <link rel="stylesheet" href="/static/dist/module/ztree/css/metroStyle/metroStyle.css" type="text/css">
    <script type="text/javascript" src="/static/dist/module/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/dist/module/ztree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/static/dist/module/ztree/js/jquery.ztree.exedit.js"></script>
    <style>
        div.zTreeDemoBackground {width:250px;height:362px;text-align:left;}
        ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
        ul.log {border: 1px solid #617775;background: #f0f6e4;width:300px;height:170px;overflow: hidden;}
        ul.log.small {height:45px;}
        ul.log li {color: #666666;list-style: none;padding-left: 10px;}
        ul.log li.dark {background-color: #E3E3E3;}
    </style>
    分配角色资源
    <form id="role-form-add" name="resourceForm" enctype="multipart/form-data" method="post" >
        <input type="hidden" name="id" th:value="${role.id}"/>
        <fieldset>
            <div class="form-group">
                <label class="label">角色</label>
                <input type="text" name="name" class="form-control" placeholder="角色名" readonly th:value="${role.name}">
            </div>

            <div class="form-group">
                <label class="label">权限分配</label>
                <div style="border: 1px solid #ccc; padding: 10px">
                    <div class="zTreeDemoBackground">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>

            <button type="button" class="btn btn-primary" id="role_btn_save">保 存</button>
        </fieldset>
    </form>
    <script type="application/javascript">

        function initTree() {
            //treeDemo
            return loadResourcesTree('treeDemo')
        }

        function loadResourcesTree(id) {

            var setting = {
                view: {
                    addHoverDom: addHoverDom,
                    removeHoverDom: removeHoverDom,
                    selectedMulti: false,
                    showIcon: true
                },
                check: {
                    enable: true
                },
                async: {
                    enable: true,
                    url: "/admin/resource/getAllResources",
                    dataFilter: function (treeId, parentNode, responseData) {
                        if (responseData) {
                            for(var i =0; i < responseData.length; i++) {
                                responseData[i].icon = null;
                                //responseData[i].name += "_filter";
                            }
                        }
                        return responseData;
                    }
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pid",
                        rootPId: 0
                    }
                },
                edit: {
                    enable: true
                },
                callback: {
                    onAsyncSuccess: function (event, treeId, treeNode, msg) {
                        tree.expandAll(true);
                        var params = {};
                        params['id'] = $('input[name=id]').val();
                        // 初始化后台的角色资源信息
                        $.post('/admin/role/getResourcesByRoleId', params, function (res) {
                            if(res.code == 200 && res.status){
                                var olds = res.data;
                                var nodes = tree.getNodes();
                                nodes = tree.transformToArray(nodes);
                                for(var index in nodes){
                                    for(var index2 in olds){
                                        if(olds[index2].resourceId == nodes[index].id){
                                            tree.checkNode(nodes[index], true, false);
                                        }
                                    }
                                }
                            }

                        });
                    }
                }
            };

            var zTree = $.fn.zTree.init($("#"+id), setting);
            return zTree;

        }


        var tree = null;
        $(document).ready(function(){
            //$.fn.zTree.init($("#treeDemo"), setting_1, zNodes);
            tree = initTree("treeDemo");

        });

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(){
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
                return false;
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
        };




        /**
         * 保存按钮
         */
        $('#role_btn_save').on('click', function () {

            //$("#treeDemo").


            var _this = this;
            var params = {};
            var nodes = tree.getCheckedNodes(true);
            var resources = new Array();
            for(index in nodes){
                console.log(nodes[index]);
                resources.push(nodes[index].id)
            }
            console.log(resources.toString());
            console.log($('input[name=id]').val());
            params['roleId'] = $('input[name=id]').val();
            params['resources'] = resources.toString();

            console.log(params);
            $(_this).html('<i class="icon icon-spin icon-spinner-snake"></i>正在保存……')
            $('#resource-form-add fieldset').attr('disabled', true);

            $.post('/admin/role/saveConf', params, function (res) {
                if(res.code == 200 && res.status){
                    new $.zui.Messager('保存成功。', {
                        type: 'success',
                        icon: 'check',//smile
                        close: true,
                        time: 2500,
                        placement: 'center' // 定义显示位置
                    }).show();
                    // 页面跳转
                    $('body').hrefClick('/admin/role/index');
                }else{
                    new $.zui.Messager('保存失败，请检查或修改内容后重试。', {
                        type: 'danger',
                        icon: 'frown',//smile
                        close: true,
                        placement: 'center' // 定义显示位置
                    }).show();
                    $(_this).html('保 存');
                    $('#resource-form-add fieldset').attr('disabled', false);
                }
            });
        });

    </script>
</div>
</body>
</html>